<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

    <h2>1.Vue.directive自定义指令</h2>
    <div class="title-wrapper">
      <div>
        自定义指令学习，自动聚焦v-focus：
        <input
          v-focus
          class="inputClass"
          type="text"
          placeholder="快看快看，v-focus！！！"
        />
      </div>

      <div>
        此处对比，无自动聚焦：
        <input type="text" placeholder="无自动聚焦" />
      </div>
    </div>

    <h2>2.slot插槽学习</h2>
    <div class="title-wrapper">
      <h4>vue中的插槽，指的是子组件中提供给父组件使用的一个占位符；</h4>

      <p>下面是个插槽:HeaderSlot</p>

      <!-- 子组件：插槽slot组件 -->
      <!-- 插槽’顺序‘无所谓，具体看子组件顺序，此处只是自定义内容 -->
      <headerSlot>
        <!-- 默认插槽内容 -->
        <!-- <p>hello 我是父组件内容3</p> -->

        <!--  具名插槽  -->
        <template slot="footer">
          <h5>父组件命名：footer</h5>
        </template>

        <template slot="header">
          <h5>父组件命名：header</h5>
        </template>

        <!-- 默认插槽 -->
        <template slot>
          <p>我是父组件内容1:XXX</p>
        </template>
        <p>我是父组件内容2:XXX</p>
      </headerSlot>
    </div>

    <h2>3.vuex学习</h2>
    <div class="title-wrapper">
      <vuexDemo1 />
      <br />
      <vuexDemo2 />
      <p>父组件，获取红包总金额：{{ $store.state.count }}元</p>
    </div>

    <h2>4.$set学习</h2>
    <div class="title-wrapper">
      <p>name: {{ student.name }}</p>
      <p>age: {{ student.age }}</p>
    </div>

    <h2>4.computed学习</h2>
    <div class="title-wrapper">
      <p>computed用法：{{ newCptd }}</p>

      姓：<input
        type="text"
        placeholder="firstName"
        v-model="firstName"
      /><br />
      名：<input type="text" placeholder="lastName" v-model="lastName" /><br />
      姓名1(单向),仅能get:<input
        type="text"
        placeholder="FullName1"
        v-model="fullName1"
      /><br />
      姓名2(双向)，可以手动输入改变值:<input
        type="text"
        placeholder="FullName2"
        v-model="fullName2"
      /><br />
    </div>

    <h2>5.eventBus学习</h2>
    <div class="title-wrapper">
      <p>let eventBus = new Vue()</p>
      <p>eventBus.aa = 'AA'</p>
      <p>eventBus.$emit('aaF','AA')</p>
      <p>eventBus.$on('aaF',function(params){ })</p>
      <p>----------------</p>
      eventBus.aa = {{ eventBusAA }}
    </div>
  </div>
</template>

<script>
// slot 学习
import headerSlot from "./HeaderSlot/slot.vue";
// vuex 学习
import vuexDemo1 from "./vuexDemo/cpm1.vue";
import vuexDemo2 from "./vuexDemo/cpm2.vue";

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      student: {
        name: "xiaoming",
      },
      firstName: "A",
      lastName: "B",
      eventBusAA: "空11",
    };
  },
  computed: {
    //什么时候执行：初始化显示/ 相关的data属性发生变化
    fullName1() {
      //计算属性中的get方法，方法的返回值就是属性值
      return this.firstName + " " + this.lastName;
    },

    fullName2: {
      get() {
        //回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
        return this.firstName + " " + this.lastName;
      },
      set(val) {
        //监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
        //val就是fullName3的最新属性值
        const names = val.split(" ");
        this.firstName = names[0];
        this.lastName = names[1];
      },
    },
    newCptd: {
      get() {
        return "???";
      },
      set(v) {
        return v;
      },
    },
    // newCptd() {
    //   return "123";
    // },
  },
  watch: {
    student: {
      deep: true,
      handler(val) {
        console.log("---watch", val);
      },
    },
  },
  components: {
    headerSlot,
    vuexDemo1,
    vuexDemo2,
  },
  mounted() {
    // 如果data中没有定义student新属性，则无法实现响应式
    // setTimeout(() => {
    //   this.student.age = 19;
    // }, 2000);

    // 实现响应式一：data()中给对象添加对应新属性
    // 实现响应式二:重新赋值
    this.student = {
      ...this.student,
      age: "20",
    };
    // this.student = Object.assign({}, this.student, { age: "21111" });
    // 实现响应式三：用$set语法糖，强制响应
    // this.$set(this.student, "age", "22");

    // console.log("this.student=", this.student);

    // vue兄弟组件之间用eventbus传值，传值成功但是页面没有变化!!!
    // 此处踩坑记录一下，使用箭头函数
    window.eventBus.$on(
      "aaF",
      // function (params) {
      (params) => {
        this.eventBusAA = params;
      }
    );
  },
  methods: {},
  // 局部自定义指令
  // directives: {
  //   focus2: {
  //     inserted: function (el) {
  //       el.focus();
  //     },
  //   },
  // },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import "./HelloWorld.less";
</style>
